<template>
  <app-content class="h-panel">
    <div class="h-panel-bar">
			<span class="h-panel-title">
				<template v-if="auxiliary">{{auxiliary.name}}</template><template v-if="auxiliaryItem">:{{auxiliaryItem.name}}</template> 明细账</span>
    </div>
    <Row type="flex" :space-x="10" class="margin-right-left margin-top">
      <Cell>
        <account-date-choose v-model="accountDate"/>
      </Cell>
      <Cell class="label">辅助类别：</Cell>
      <Cell>
        <Select type="object" v-model="auxiliary" :deletable="false" style="min-width: 100px" :datas="auxiliaryType" keyName="id" titleName="name"/>
      </Cell>
      <Cell>
        <Button :disabled="!auxiliary" :loading="loading" color="primary" @click="doSearch" :style="btnStyle">查询</Button>
      </Cell>
      <Cell :flex="1">
        <!--<div class="float-right">
          <Checkbox v-model="showNumPrice">显示数量金额</Checkbox>
        </div>-->
      </Cell>
    </Row>
    <Row class="h-panel-body" type="flex" :space-x="10">
      <Cell :flex="1">
        <Table :datas="dataList" :border="true" :loading="loading">
          <TableItem title="日期" prop="voucherDateStr" :width="85"></TableItem>
          <TableItem title="凭证字号" :width="85">
            <template slot-scope="{data}" v-if="data.word">
              <span v-if="data.voucherId" @click="showModal(data.voucherId)" class="voucher-link" :style="fontStyle">{{data.word}}-{{data.code}}</span>
            </template>
          </TableItem>
          <TableItem title="摘要" prop="summary"></TableItem>
          <TableItem title="借方" align="right" :width="85">
            <template slot-scope="{data}">
              {{data.debitAmount|numFormat}}
            </template>
          </TableItem>
          <TableItem title="贷方" align="right" :width="85">
            <template slot-scope="{data}">
              {{data.creditAmount|numFormat}}
            </template>
          </TableItem>
          <TableItem title="方向" prop="balanceDirection" align="center" :width="50"></TableItem>
          <TableItem title="余额" align="right" :width="85">
            <template slot-scope="{data}">
              {{data.balance|numFormat}}
            </template>
          </TableItem>
        </Table>
      </Cell>
      <Cell v-width="200">
        <Tree @select="doSelect" :option="param" ref="auxiliary" filterable selectOnClick className="h-tree-theme-row-selected"></Tree>
      </Cell>
    </Row>
    <Modal v-model="openModal" v-bind="{closeOnMask: false, hasCloseIcon: true}">
      <VoucherModal :voucherId="openModalId" :isHideBtn="isHideBtn" ref="modalForm"></VoucherModal>
    </Modal>
  </app-content>
</template>

<script>
  import VoucherModal from '../../voucher/VoucherModal'
  import moment from 'moment'
  import Vue from 'vue'
  import { DEFAULT_COLOR } from '@/store/mutation-types'
  import { updateTheme } from '@comp/tools/setting'

  export default {
    name: "AuxiliaryAccountingDetail",
    components: {
      VoucherModal
    },
    data() {
      return {
        dataList: [],
        loading: false,
        showNumPrice: false,
        param: {
          keyName: 'id',
          parentName: 'parentId',
          titleName: 'name',
          dataMode: 'list',
          datas: []
        },
        accountDate: null,
        auxiliary: null,
        auxiliaryItem: null,
        auxiliaryType: [],
        openModal: false,
        openModalId: null,
        isHideBtn: true,
        btnStyle: { background: '', borderColor: ''},
        fontStyle: { color: ''},
      }
    },
    mounted () {
      this.primaryColor = Vue.ls.get(DEFAULT_COLOR)
      updateTheme(this.primaryColor)
      this.btnStyle.background = this.primaryColor
      this.btnStyle.borderColor = this.primaryColor
      this.fontStyle.color = this.primaryColor
      this.loadAuxiliaryType();
    },
    methods: {
      loadAuxiliaryType() {
        this.$api.setting.accountingCategory.list().then(({data}) => {
          this.auxiliaryType = data;
        });
      },
      loadList() {
        this.loading = true;
        let accountDateStr = moment(this.accountDate).format('YYYY-MM-DD HH:mm:ss')
        this.$api.accountbook.loadAuxiliaryDetails({
          accountDate: accountDateStr,
          auxiliaryId: this.auxiliary.id,
          auxiliaryItemId: this.auxiliaryItem.id,
        }).then(({data}) => {
          this.dataList = data;
        }).finally(() => {
          this.loading = false;
        });
      },
      loadAuxiliaryList() {
        this.dataList = [];
        this.$api.accountbook.loadAuxiliaryList({
          auxiliaryId: this.auxiliary.id
        }).then(({data}) => {
          data.forEach(val => val.name = val.code + " " + val.name);
          data = data.sort((a, b) => a.code.localeCompare(b.code));
          this.$set(this.param, "datas", data);
          if (data.length) {
            this.auxiliaryItem = data[0];
            this.loadList();
            this.$nextTick(() => {
              this.$refs.auxiliary.updateSelect(this.auxiliaryItem.id);
            });
          }
        });
      },
      doSearch() {
        this.loadAuxiliaryList();
      },
      doSelect(node) {
        this.auxiliaryItem = node;
        this.loadList();
      },
      showModal(id) {
        this.openModalId = id
        this.openModal = true
      }
    }
  }
</script>

<style scoped lang="less">
  .h-panel-bar {
    padding: 10px 20px;
  }
  .voucher-link {
    color: #1890FF;
    cursor: pointer;
  }
</style>